<template>
  <div class="fxsj">
    <el-card>
      <div slot="header" class="card-header">
        <span>{{ this.$route.meta.title }}</span>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="赠费退费情况监控模型" name="赠费退费情况监控模型">
          <TableA />
        </el-tab-pane>
        <el-tab-pane
          label="异常获赠话费退费监控模型"
          name="异常获赠话费退费监控模型"
        >
          <TableB />
        </el-tab-pane>
        <el-tab-pane
          label="异常退现账户获赠话费情况监控模型"
          name="异常退现账户获赠话费情况监控模型"
        >
          <TableC />
        </el-tab-pane>
      </el-tabs>
      <el-col :span="24" class="mgb">
        <el-card shadow="never">
          <div slot="header">
            风险数据展示
          </div>
          <Table></Table>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="never" class="ecahrt">
          <EchartBar></EchartBar>
        </el-card>
      </el-col>
    </el-card>
  </div>
</template>

<script>
import Table from './components/Table'
import TableA from './components/TableA'
import TableB from './components/TableB'
import TableC from './components/TableC'
import EchartBar from './components/EchartBar'
export default {
  components: {
    Table,
    TableA,
    TableB,
    TableC,
    EchartBar
  },

  data() {
    return {
      activeName: '赠费退费情况监控模型'
    }
  },

  watch: {
    activeName(newValue) {
      this.$bus.$emit('change', newValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.fxsj {
  .mgb {
    margin-bottom: 20px;
  }
  .ecahrt {
    /deep/ .el-card__body {
      height: 500px !important;
    }
  }
}
</style>
